<template>
  <div class="admin">
    <el-card class="search">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="用户ID" prop="id">
          <el-input v-model.trim="searchForm.id" placeholder="用户ID" class="input" clearable />
        </el-form-item>

        <el-form-item label="用户状态：" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="隐藏" value="0" />
            <el-option label="正常" value="1" />
          </el-select>
        </el-form-item>

        <el-form-item label="用户名称" prop="username">
          <el-input v-model.trim="searchForm.username" placeholder="用户名称" class="input" clearable />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="medium" @click="searchData">
            搜索
          </el-button>
          <el-button type="primary" size="medium" @click="resetSearchData">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="content">
      <el-table :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="ID" width="80" align="center">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" align="center">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{
              scope.row.status | statusFilterText
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination background :current-page.sync="searchForm.page" layout="total, prev, pager, next" :total="count" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: 'admin',
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: 'danger',
        1: 'success',
      }
      return statusMap[status]
    },
    statusFilterText(status) {
      const statusMap = {
        0: '禁用',
        1: '正常',
      }
      return statusMap[status]
    },
  },
  data() {
    return {
      list: null,
      count: 0,
      searchForm: {
        id: '',
        username: '',
        status: '',
        page: 1,
      },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取用户信息
    async fetchData() {
    },
    // 跳转编辑
    handleEdit(id) {
      this.$router.push('/user/edit?id=' + id)
    },
    // 删除用户
    handleDelete(id) {
    },
    // 搜索
    searchData() {
    },
    // 点击页面
    handleCurrentChange(page) {
    },
    // 重置表单
    resetSearchData() {
    },
  },
}
</script>

<style scoped lang="scss">
.search {
  margin-bottom: 20px;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 24px 0;
}

</style>
